.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
body{
    background: #f4f4f4;
    .header{
        width:100%;
        .px2rem(height, 100);
        background: #ff3600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        left:0;
        top:0;
        z-index: 99;
        .left{
            .px2rem(width, 100);
        }
        .center{
            .px2rem(width, 300);
            img{
                width:100%;
            }
        }
        .right{
            .px2rem(width, 100);
            text-align: center;
            .px2rem(font-size, 48);
            color: #ffffff;
        }
    }
    .swiper-container{
        .px2rem(margin-top, 100);
        .swiper-wrapper{
            .swiper-slide{
                img{
                    width: 100%;
                }
            }
        }
    }
    .title{
        width:100%;
        background: #ffffff;
        img{
            width:100%;
        }
    }
    .column{
        background: #fff;
        .px2rem(margin-top, 20);
        .px2rem(padding-bottom, 20);
        display: flex;
        justify-content: center;
        align-items: center;
        .item{
            width:25%;
            dt{
                text-align: center;
                img{
                    .px2rem(width, 60);
                    .px2rem(margin-top,30);
                    .px2rem(margin-bottom,10);
                }
            }
            dd{
                text-align: center;
                .px2rem(margin-bottom,30);
            }
        }
    }
    .new-arrival{
        .px2rem(margin-top,20);
        background: #ffffff;
        h3{
            .px2rem(padding-top, 30);
            .px2rem(font-size, 36);
            text-align: center;
        }
        .column{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                width:32%;
                img{
                    width: 100%;
                }
            }
            .center{
                width:32%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #999;
                .centers{
                    .px2rem(width, 20);
                    img{
                        width:100%;
                    }
                }
            }
            .right{
                width:32%;
                img{
                    width: 100%;
                }
            }
        }
    }
    .main{
        background: #ffffff;
        dl{
            width:95%;
            margin-left:2.5%;
            .px2rem(padding-top, 20);
            .px2rem(padding-bottom, 20);
            .px2rem(height, 210);
            background: #ffffff;
            dt{
                .px2rem(width, 200);
                float: left;
                img{
                    width:100%;
                }
            }
            dd{
                .px2rem(padding-left, 220);
                .px2rem(width, 500);
                background: #ffffff;
                .name{
                    .px2rem(line-height, 50);
                    .px2rem(font-size, 26);
                }
                .new{
                    .px2rem(line-height, 40);
                    color: #ccc;
                }
                .money{
                    color: red;
                    .px2rem(font-size, 30);
                    .px2rem(line-height, 80);
                }
            }
        }
    }
    .Review{
        .px2rem(margin-top,20);
        background: #ffffff;
        h3{
            .px2rem(padding-top, 30);
            .px2rem(font-size, 36);
            text-align: center;
        }
        .column{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                width:31%;
                img{
                    width: 100%;
                }
            }
            .center{
                width:34%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #999;
                .centers{
                    .px2rem(width,30);
                    img{
                        width:100%;
                    }
                }
            }
            .right{
                width:31%;
                img{
                    width: 100%;
                }
            }
        }
    }
    .container1{
        .px2rem(padding-left, 20);
        background: #ffffff;
        .px2rem(margin-top, 0);
        .px2rem(padding-top, 30);
        .px2rem(padding-bottom, 30);
        .swiper-wrapper{
            .swiper-slide{
                border:1px solid #ccc;
                padding:2% 0;
                box-sizing: border-box;
                .img{
                    .px2rem(margin-top, 30)
                }
                .p{
                    .px2rem(height, 170);
                    .px2rem(margin-top, 50);
                    .px2rem(margin-left, 20);
                    .px2rem(margin-right, 10);
                    .px2rem(line-height,38);
                    overflow: hidden;
                }
                .p1{
                    .px2rem(line-height, 60);
                    .px2rem(margin-left, 20);
                    .px2rem(font-size, 12);
                    color: #999;
                    display: flex;
                    align-items: center;
                    img{
                        .px2rem(width, 25);
                        .px2rem(height, 25);
                        .px2rem(margin-right, 10);
                    }
                }
                .p2{
                    .px2rem(margin-left, 20);
                    .px2rem(margin-bottom, 30);
                    .px2rem(font-size, 20);
                    span{
                        color: red;
                        float: right;
                        .px2rem(margin-right, 20);
                    }
                }
            }
        }
    }
    .category{
        .px2rem(margin-top,20);
        .px2rem(padding-bottom, 20);
        background: #ffffff;
        h3{
            .px2rem(padding-top, 30);
            .px2rem(font-size, 36);
            text-align: center;
        }
        .column{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                width:30%;
                img{
                    width: 100%;
                }
            }
            .center{
                width:36%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #999;
                .centers{
                    .px2rem(width, 20);
                    img{
                        width:100%;
                    }
                }
            }
            .right{
                width:30%;
                img{
                    width: 100%;
                }
            }
        }
    }
    .classify{
        display:flex;
        width: 100%;
        border-bottom: 1px solid #e6e6e6;
        .left{
            width: 66.667%;
            border-right: 1px solid #e6e6e6;
            box-sizing: border-box;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .right{
            width: 33.333%;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .classification{
        clear: both;
        .px2rem(margin-bottom, 20);
        div{
            width:33.333%;
            float: left;
            border-right: 1px solid #e6e6e6;
            box-sizing: border-box;
            img{
                width:100%;
                height:100%;
            }
        }
    }
    .news{
        clear: both;
        width: 100%;
        .px2rem(margin-top, 540);
        .px2rem(margin-bottom, 110);
        .px2rem(height, 80);
        background: #ffffff;
        .left{
            float: left;
            .px2rem(line-height, 80);
            .px2rem(margin-left, 20);
        }
        .left span:first-child{
            .px2rem(font-size, 36)
        }
        .left span:last-child{
            .px2rem(font-size, 26);
            background: red;
            color:#fff;
            .px2rem(padding-left, 6);
            .px2rem(padding-right, 5);
            .px2rem(padding-bottom, 2);
            border-radius: 4px;
        }
        .container2{
            float: left;
            .px2rem(margin-left, 20);
            .px2rem(margin-top, 0);
            .px2rem(height, 80);
            width:70%;
            .swiper-wrapper{
                .px2rem(height, 80);
                .swiper-slide{
                    .px2rem(height, 80);
                    .px2rem(line-height, 80);
                    .px2rem(font-size, 26);
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
               }
            }
        }
    }
    .footer{
        width:100%;
        .px2rem(height, 90);
        background: #ffffff;
        display: flex;
        align-items: center;
        position: fixed;
        left:0;
        bottom: 0;
        z-index: 99;
        dl{
            width:25%;
            text-align: center;
            color: #999;
            dt{
                .px2rem(margin-bottom, 10);
                .px2rem(font-size, 40);
            }
        }
        .on{
            color: orangered;
        }
    }
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
        width:20px;
        height:20px;
    }
}